<template>
	<div class="revise-back">
		<img class="revise-back-img" :src="userData.backdrop" alt="">
		<div class="revise-avater global-display global-f-direction global-a-items">
			<van-uploader accept=".jpg,.jpeg,.png,.webp" max-count="1" result-type="file"
			:after-read="uploadAvatarurl"
			>
			<img :src="userData.avatarUrl" class="personal-margin" alt="">
			</van-uploader>
			<van-uploader accept=".jpg,.jpeg,.png,.webp" max-count="1" result-type="file"
			:after-read="uploadBackdrop"
			>
			<van-button type="default" size="small">设置背景</van-button>
			</van-uploader>
		</div>
	</div>
	<div class="personal-view global-display global-f-direction global-a-items">
		<van-field v-model="userData.nickname" label="昵称" placeholder="请填写昵称" />
		<van-field
		  v-model="userData.gender"
		  is-link
		  readonly
		  label="性别"
		  placeholder="选择性别"
		  @click="showPicker = true"
		/>
		<van-field
		  v-model="userData.birthday"
		  is-link
		  readonly
		  label="出生日期"
		  placeholder="选择出生日期"
		  @click="showDate = true"
		/>
		<van-field
		  v-model="userData.city"
		  is-link
		  readonly
		  label="常居城市"
		  placeholder="选择常居城市"
		  @click="showCity = true"
		/>
		<van-button type="success" @click="subMit">提交</van-button>
	</div>
		<!-- 选择性别弹窗 -->
		<van-popup :show="showPicker" round position="bottom">
		  <van-picker
		    :columns="columns"
		    @cancel="showPicker = false"
		    @confirm="onConfirm"
		  />
		</van-popup>
		<!-- 选择日期弹窗 -->
		<van-popup :show="showDate" round position="bottom">
		   <van-date-picker
		      v-model="birthdayDate"
		      :min-date="minDate"
		      :max-date="maxDate"
			   @cancel="showDate = false"
			  @confirm="confirmData"
		    />
		</van-popup>
		<!-- 选择省市区 -->
		<van-popup :show="showCity" round position="bottom">
		   <van-area :area-list="areaList" columns-num="2"
			@confirm="confirmCity"
			@cancel="showCity = false"
			/>
		</van-popup>
</template>

<script setup>
import {reactive, ref,onMounted} from 'vue'
import moment from 'moment'
moment.locale('zh-cn');
import { areaList } from '@vant/area-data';//省市区数据
import request from '@/api/request.js'
import emitter from '@/api/event.js'
import { useRouter } from 'vue-router'
const $router = useRouter()  // 这是路由跳转的
import {compressImage} from '@/api/compression.js'
import {upLoadCos} from '@/api/cos.js'
import { showToast,showLoadingToast } from 'vant';
// 获取本地缓存的用户资料
onMounted(()=>{
	const {avatarUrl,backdrop,nickname,gender,birthday,city} = JSON.parse(localStorage.getItem('userInfor'))
	userData.avatarUrl = avatarUrl
	userData.backdrop = backdrop
	userData.nickname = nickname
	userData.gender = gender
	userData.birthday = birthday
	userData.city = city
})
// 存储用户资料数据
const userData = reactive({
	backdrop:'',
	avatarUrl:'',
	nickname:'',
	gender:'',
	birthday:'',
	city:''
})
// 上传头像回调
async function uploadAvatarurl(event){
	const toast2 = showLoadingToast({
	  message: '上传中...',
	  forbidClick: true,
	  duration:0
	});
	const comressRes = await compressImage([{file:event.file}])
	const upLoadRes = await upLoadCos(comressRes)
	userData.avatarUrl = upLoadRes[0]
	toast2.close();
}
// 上传背景回调
async function uploadBackdrop(event){
	const toast2 = showLoadingToast({
	  message: '上传中...',
	  forbidClick: true,
	  duration:0
	});
	const comressRes = await compressImage([{file:event.file}])
	const upLoadRes = await upLoadCos(comressRes)
	userData.backdrop = upLoadRes[0]
	toast2.close();
}
// 性别弹窗显示||隐藏
const showPicker = ref(false)
const columns = [
      { text: '男', value: '1' },
      { text: '女', value: '0' }
];
// 选择性别
function onConfirm(event){
	userData.gender = event.selectedOptions[0].text
	showPicker.value = false
}
// 日期生日弹窗显示||隐藏
const showDate = ref(false)
// 选择生日
const C_year = moment().format('YYYY')//当前年
const C_month = moment().format('MM')//当前月
const C_day = moment().format('DD')//当前日
const birthdayDate = [C_year,C_month,C_day]
const minDate = ref(new Date(1930, 1, 1))
const maxDate = ref(new Date)
function confirmData(event){
	userData.birthday = event.selectedValues.join('-')
	showDate.value = false
}
// 城市弹窗显示||隐藏
const showCity = ref(false)
// 选择省市区
function confirmCity(event){
	let str = ''
	event.selectedOptions.forEach(item=>str += item.text)
	userData.city = str
	showCity.value = false
}
// 提交
async function subMit(){
	const res = await request.post('/modify_the_user', userData);
	const {age,avatarUrl,backdrop,birthday,city,gender,nickname} = res.data
	const userJson = JSON.parse(localStorage.getItem('userInfor'))
	userJson.age = age
	userJson.avatarUrl = avatarUrl
	userJson.backdrop = backdrop
	userJson.birthday = birthday
	userJson.city = city
	userJson.gender = gender
	userJson.nickname = nickname
	localStorage.setItem('userInfor', JSON.stringify(userJson));
	emitter.emit('upload-userdata');// 更新成功触发
	$router.go(-1)
}
</script>

<style scoped>
.revise-back{
	height: 250px;
	overflow: hidden;
	position: relative;
}
.revise-back-img{
	height: 250px;
	width: 100%;
	object-fit: cover;
} 
.revise-avater{
	position: absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}
.personal-view{
	margin-top: 20px;
}
.personal-margin{
	width: 70px;
	height: 70px;
	border-radius: 50%;
	border: 4px solid #ffffff;
	object-fit: cover;
}
::v-deep .van-button--normal{
	margin: 40px 0;
	padding: 20px 100px;
}
</style>